<!doctype html>
<html lang="en">
    <head>
		<meta charset="utf-8">
        <meta name="description" content="LegoCMS">
        <#include "../include_page/link.html"/>
        <#include "../include_page/code-link.html"/>
		<script type="text/javascript">
		$(function(){
			var editor = CodeMirror.fromTextArea(document.getElementById("content"), {
		        lineNumbers: true,
		        mode: 'htmlmixed',
		        theme: 'eclipse',
		        scrollbarStyle: "simple",
		        indentUnit: 4,
		        indentWithTabs: true,
		        autoCloseTags: true,
		        autoCloseBrackets: true,
		        styleActiveLine: {nonEmpty: true},
		        lineWrapping: true,
		        extraKeys: {
		            "'<'": completeAfter,
		            "'/'": completeIfAfterLt,
		            "' '": completeIfInTag,
		            "'='": completeIfInTag,
		            "Ctrl-Space": "autocomplete",
		            "F11": function(cm) {
		                cm.setOption("fullScreen", !cm.getOption("fullScreen"));
		            },
		            "Esc": function(cm) {
		                if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
		            }
		        },
		        hintOptions: {schemaInfo: tags}
	        });
			refreshTree();
			function refreshTree() {
				var treeUrl = ctx + "/admin/directive/cmsTemplateTree";
				var selectNode;
				ajaxSubmit(treeUrl, null, function(data) {
					var setting = {
						data: {
							simpleData: {
								enable: true,
								idKey : 'code',
								pIdKey : "parentCode"
							}
						},
						callback: {
							onClick: function(event, treeId, treeNode) {
								refreshForm(treeNode.code);
							}
						}
					};
					$.fn.zTree.init($("#templateTree"), setting, data.simpleTree);
				});
			}

			function refreshForm(code) {
				var detailUrl = ctx + "/admin/directive/cmsTemplate";
			    ajaxSubmit(detailUrl, 'code=' + code, function(data) {
			    	var form = $('#save-template-form');
			    	form.resetForm();
			    	form.setForm(data.template);
			    	if (data.template.type.code == 'file') {
				    	$('#pre-view').attr('href', ctx + "/admin/template/find/" + data.template.code);
			    	}
			    	else {
				    	$('#pre-view').attr('href', "");
			    	}
					form.find("input[name='action']").val('modify');
			    	editor.setValue(data.template.content);
			    })
			}
			
			$('#pre-view').click(function() {
				var url = $('#pre-view').attr('href');
				if (url) {
					window.parent.showIframe("<@t.message 'title.template-preview'/>", url);
				}
				else {
					showMsg("<@t.message 'verify.template'/>", 2);
				}
			});
			
			$('#add-place').click(function() {
				var orgUrl = ctx + "/admin/directive/cmsPlaceTree";
				ajaxSubmit(orgUrl, null, function(data) {
					window.parent.showSimpleTree("<@t.message 'title.place-select'/>", data.simpleTree, function(treeNode){
						if (!treeNode.isParent) {
							var temp = '&lt;@includePlace code="' + treeNode.code + '" /&gt;&lt;!-- ' + treeNode.name + ' --&gt;';
							temp = temp.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
						    editor.replaceSelection(temp);
						}
					})
				});
			});

			$('#add-template').click(function() {
				var orgUrl = ctx + "/admin/directive/cmsTemplateTree";
				ajaxSubmit(orgUrl, null, function(data) {
					window.parent.showSimpleTree("<@t.message 'title.template-select'/>", data.simpleTree, function(treeNode){
						if (!treeNode.isParent) {
							var temp = '&lt;@include code="' + treeNode.code + '" /&gt;&lt;!-- ' + treeNode.name + ' --&gt;';
							temp = temp.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
						    editor.replaceSelection(temp);
						}
					})
				});
			});

			$('#add-file').click(function() {
				var orgUrl = ctx + "/admin/directive/cmsFileTree";
				ajaxSubmit(orgUrl, null, function(data) {
					window.parent.showSimpleTree("<@t.message 'title.site-file-select'/>", data.simpleTree, function(treeNode){
						if (!treeNode.isParent) {
							var fileType = getFileType(treeNode.name);
							var temp;
							if (fileType == 'js') {
								temp = '&lt;script type="text/javascript" src="&dl;{site.path}' + treeNode.path + '"/&gt;';
								temp = temp.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&dl;/g, '$');
							}
							else if (fileType == "css") {
								temp = '&lt;link rel="stylesheet" href="&dl;{site.path}' + treeNode.path + '"/&gt;';
								temp = temp.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&dl;/g, '$');
							}
							else if (isImage(fileType)) {
								temp = '&lt;img rel="stylesheet" src="&dl;{site.path}' + treeNode.path + '"/&gt;';
								temp = temp.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&dl;/g, '$');
							}
							else {
								temp = '&lt;a rel="stylesheet" href="&dl;{site.path}' + treeNode.path + '"&gt;' + treeNode.name + '&lt;/a&gt;';
								temp = temp.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&dl;/g, '$');
							}
							console.log(temp);
						    editor.replaceSelection(temp);
						}
					})
				});
			});
			
			$('#add').click(function() {
				var nodes = getTree('templateTree').getSelectedNodes();
				var form = $('#save-template-form');
				form.resetForm();
				form.find("input[name=code]").val('');
        		if (isNotEmpty(nodes)) {
					form.find("input[name='parent.code']").val(nodes[0].code);
				}
				else {
					form.find("input[name='parent.code']").val('');
				}
				form.find("input[name='action']").val('add');
				editor.setValue("");
			});
			
			$('#delete').click(function() {
				var code = $('#save-template-form').find("[name=code]").val();
				if (isEmpty(code)) {
					showMsg("<@t.message 'verify.template'/>", 5);
					return;
				}
				window.parent.showConfirm("<@t.message 'template.delete'/>", "<@t.message 'title.template-delete'/>", function(){
					var url = ctx + "/admin/template?action=delete";
					ajaxSubmit(url, "code=" + code, function() {
						$('#save-template-form').resetForm();
						refreshTree();
					});
				})
			});
			
			ajaxForm($('#save-template-form'), function(data) {
				refreshTree();
				refreshForm(data.result);
			});
		})
		</script>
    </head>
    <body>
       	<div class="row">
			<div class="col-md-3">
				<div class="main-card card">
					<div class="card-body">
						<ul id="templateTree" class="ztree"></ul>
					</div>
				</div>
			</div>
       		<div class="col-md-9">
				<div class="main-card card">
					<div class="card-body">
		       			<form id="save-template-form" action="${ctx}/admin/template" onsubmit="return false;" class="needs-validation" novalidate>
							<input name="site.code" type="hidden" required>
							<input name="parent.code" type="hidden" required>
							<input name="code" type="hidden" required>
							<input name="action" type="hidden" value="add" required>
							<div class="position-relative row form-group">
				                <div class="col-md-3">
									<label class="col-form-label"><@t.page 'list.name'/></label>
									<input name="name" type="text" class="form-control" required>
									<div class="invalid-feedback">
                                		<@t.message 'verify.name'/>
                                    </div>
				                </div>
				                <div class="col-md-2">
									<label class="col-form-label"><@t.page 'list.type'/></label>
									<select name="type.code" class="custom-select" required>
										<@cmsTemplateType>
											<#list types as type>
												<option value="${type.code}">${type.name}</option>
											</#list>
										</@cmsTemplateType>
									</select>
									<div class="invalid-feedback">
                                		<@t.message 'verify.type'/>
                                    </div>
				                </div>
				                <div class="col-md-6">
									<label class="col-form-label"><@t.page 'list.operation'/></label>
									<div>
										<span class="btn btn-info" id="add-template"><@t.page 'btn.template-fragment'/></span>
										<span class="btn btn-info" id="add-place"><@t.page 'btn.place-fragment'/></span>
										<span class="btn btn-info" id="add-file"><@t.page 'btn.site-file'/></span>
										<span class="btn btn-info" id="pre-view"><@t.page 'btn.preview'/></span>
									</div>
				                </div>
							</div>
							<div class="position-relative row form-group">
								<textarea id="content" name="content" class="form-control"></textarea>
							</div>
							<div class="position-relative row form-check">
								<div class="col-sm-10 offset-sm-2">
									<button class="btn btn-info" type="submit"><@t.page 'btn.save'/></button>
									<span class="btn btn-secondary" id="add"><@t.page 'btn.add'/></span>
									<span class="btn btn-danger" id="delete"><@t.page 'btn.delete'/></span>
								</div>
							</div>
						</form>
					</div>
				</div>
       		</div>
       	</div>
    </body>
</html>
